<template>
  <div class="goout">
    <el-container>
      <el-header class="header">出差申请</el-header>
      <el-main>
        <div class="navigation">
          <el-button type="warning" @click="addDialog = true"
            >发起新的</el-button
          >
          <el-button type="info">导入</el-button>
          <el-tabs v-model="activeName" class="tabs" @tab-change="handleClick">
            <el-tab-pane label="待办事项" name="1"></el-tab-pane>
            <el-tab-pane label="已办事项" name="2"></el-tab-pane>
            <el-tab-pane label="抄送事项" name="3"></el-tab-pane>
            <el-tab-pane label="我发起的" name="4"></el-tab-pane>
            <el-tab-pane label="全部数据" name="5"></el-tab-pane>
            <el-tab-pane label="概览" name="6"></el-tab-pane>
            <el-tab-pane label="统计报表" name="7"></el-tab-pane>
          </el-tabs>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="_id" label="编号" show-overflow-tooltip />
          <el-table-column prop="status" label="当前流程" :formatter="formatterStatus" />
          <el-table-column prop="name" label="申请人" />
          <el-table-column prop="reason" label="出差事由" width="200px" />
          <el-table-column prop="starttime" label="出发日期" width="150px" :formatter="formatterTime" />
          <el-table-column prop="endtime" label="返回日期" width="150px" :formatter="formatterTime" />
          <el-table-column prop="days" label="出差总天数" width="150px" />
          <el-table-column label="操作" width="100px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="Change"
        />
        <!-- 抽屉 -->
        <el-drawer
          ref="drawerRef"
          v-model="addDialog"
          title="出差申请"
          direction="rtl"
        >
          <div class="demo-drawer__content">
            <el-form
              :model="formData"
              label-position="top"
              :rules="rules"
              ref="formRef"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="申请人" prop="name">
                    <el-input v-model="formData.name" disabled />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所在部门">
                    <el-input v-model="formData.dept" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="出差事由说明" prop="reason">
                    <el-input
                      type="textarea"
                      v-model="formData.reason"
                      placeholder="输入内容"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="出发日期" prop="starttime">
                    <el-date-picker
                      v-model="formData.starttime"
                      type="date"
                      placeholder="选择一个出发日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="返回日期" prop="endtime">
                    <el-date-picker
                      v-model="formData.endtime"
                      type="date"
                      placeholder="选择一个出发日期"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="出差总天数" prop="days">
                    <el-input v-model="formData.days" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

            <div class="demo-drawer__footer">
              <el-button @click="addDialog = false">取消</el-button>
              <el-button type="primary" @click="onSubmit(formRef)"
                >提交申请</el-button
              >
            </div>
          </div>
        </el-drawer>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { goout_list, goout_add,goout_delete } from "../../api/index";
import { ElNotification } from "element-plus";

var activeName = ref("");
var tableData = ref([]);
var total = ref(0);
var addDialog = ref(false);
var formData = ref({
  userid: JSON.parse(localStorage.getItem("userinfo"))._id,
  name: JSON.parse(localStorage.getItem("userinfo")).name,
  reason: "",
  starttime: "",
  endtime: "",
  days: "",
});
var formRef = ref();

var handleClick = () => {};

//渲染申请列表
onMounted(async () => {
  var id = JSON.parse(localStorage.getItem("userinfo"))._id;
  var res = await goout_list({ userid: id, page: 1 });
  tableData.value = res.data.list;
  total.value = res.data.total;
});
var Change = async (page) => {
  var id = JSON.parse(localStorage.getItem("userinfo"))._id;
  var res = await goout_list({ userid: id, page });
  tableData.value = res.data.list;
};

//添加申请
var onSubmit = (formRef) => {
  formRef.validate(async (valid) => {
    if (valid) {
      var res = await goout_add(formData.value);
      if (res.data.code == 200) {
        ElNotification({
          title: "新增通知",
          message: res.data.msg,
          type: "success",
        });
        addDialog.value = false; 
        tableData.value = res.data.list;
        total.value = res.data.total;
        formRef.resetFields(); 
      } else {
        ElNotification({
          title: "新增通知",
          message: res.data.msg,
          type: "error",
        });
      }
    } else {
      return false;
    }
  });
};
//格式化
var formatterStatus = function(row, column, cellValue, index){
    return cellValue == 0 ? '审核中' : '已通过';
}
var addZero = (num)=>{
    return num<10 ? '0'+num : num;
}
var formatterTime = function(row, column, cellValue, index){
    var d = new Date(cellValue);
    return `${d.getFullYear()}-${addZero( d.getMonth()+1 )}-${ addZero( d.getDate() ) }`;
}


//删除
var deleteRow = async (scope)=>{
  // console.log(scope.row);
  var res = await goout_delete({userid:scope.row.userid,id:scope.row._id,page:1});
  if (res.data.code == 200) {
        ElNotification({
          title: "删除通知",
          message: res.data.msg,
          type: "success",
        });
        tableData.value = res.data.list;
        total.value = res.data.total;
      } else {
        ElNotification({
          title: "删除通知",
          message: res.data.msg,
          type: "error",
        });
      }
}
</script>

<style scoped lang="scss">
.goout {
  .header {
    line-height: 50px;
    font-weight: 700;
  }
  .navigation {
    display: flex;
    border-top: 1px solid #ccc;
    margin-top: -20px;
    .tabs {
      margin-left: 30px;
    }
  }
}
</style>